<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue基础呀</title>
  </head>

  <body>
    <div id="app">
        <!-- 点击之后，触发事件，可以把参数进行传递。 -->
        <input type="button" value="点击这" @click="doSome">
        
        <!-- 注意传参数的时候是单引号，不是双引号！！！ -->
        <input type="button" value="点击这-有参数" @click="doSome2(888,'恭喜发财')">
        <!-- 可绑定keyup键盘事件。enter表示 回车按键松开 -->
        <input type="text" value="点我回车有惊喜" @keyup.enter="sayGood">


    </div>
    

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


    <script>
      new Vue({
        el:"#app",
        data:{

        },
        methods: {
            doSome:function(){
                console.log("你点击了一次")
            },
            doSome2:function(p1,p2){
                console.log("你点击了一次");
                console.log(p1);
                console.log(p2+'!!!');
            },
            sayGood:function(){
               alert("Be happy!");
            }
        
        },


      })
    </script>

    <!-- data是这个Vue实例中使用到的数据。用什么就写什么 -->
  </body>
</html>
